import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _uniqBy from "lodash/uniqBy";
import _isEmpty from "lodash/isEmpty";

var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _class;

/**
 * 搜索框
 */
import React from 'react';
import { Button, Select } from 'antd';
import { connect } from 'dva';
import { Bind } from 'lodash-decorators';
import intl from "../../../utils/intl";
import { openMenu } from "../DefaultMenu/utils";
import styles from "./styles.less?modules";
import HistoryItem from "./HistoryItem";
import { loadHistory, storeHistory } from "./utils";
var DefaultHeaderSearch = (_dec = Bind(), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), _dec5 = Bind(), _dec6 = Bind(), _dec7 = Bind(), (_class = /*#__PURE__*/function (_React$Component) {
  _inherits(DefaultHeaderSearch, _React$Component);

  var _super = _createSuper(DefaultHeaderSearch);

  function DefaultHeaderSearch() {
    var _this;

    _classCallCheck(this, DefaultHeaderSearch);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    _this.state = {
      data: [],
      // 根据输入框过滤出符合的值
      value: undefined,
      // 搜索框中的值
      history: loadHistory() || []
    };
    return _this;
  }

  _createClass(DefaultHeaderSearch, [{
    key: "handleGotoHistory",
    value:
    /**
     * 通过搜索历史 跳转页面
     * @param {object} tab - tab 信息
     */
    function handleGotoHistory(tab) {
      openMenu(tab);
      this.addHistory(tab);
    }
    /**
     * 新增一个历史记录
     * @param {object} tab - tab 信息
     */

  }, {
    key: "addHistory",
    value: function addHistory(tab) {
      var _this$state$history = this.state.history,
          history = _this$state$history === void 0 ? [] : _this$state$history;

      var newHistory = _uniqBy([tab].concat(_toConsumableArray(history)), function (t) {
        return t.key;
      });

      if (newHistory.length > 8) {
        newHistory.pop();
      }

      storeHistory(history);
      this.setState({
        history: newHistory
      });
    }
    /**
     * 清除一个历史记录
     * @param {object} tab
     */

  }, {
    key: "handleHistoryClose",
    value: function handleHistoryClose(tab) {
      var _this$state$history2 = this.state.history,
          history = _this$state$history2 === void 0 ? [] : _this$state$history2;
      this.setState({
        history: history.filter(function (t) {
          return t !== tab;
        })
      });
    }
    /**
     * 清除历史记录
     */

  }, {
    key: "handleHistoryClear",
    value: function handleHistoryClear() {
      this.setState({
        history: []
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this$state$history3 = this.state.history,
          history = _this$state$history3 === void 0 ? [] : _this$state$history3;
      storeHistory(history);
    }
    /**
     * 文本框变化时回调
     * @param {string} searchValue - 填写的标题
     */

  }, {
    key: "handleSearch",
    value: function handleSearch(searchValue) {
      var menuLeafNode = this.props.menuLeafNode;
      var newData = [];
      var value = searchValue ? searchValue.trim() : '';

      if (!_isEmpty(value)) {
        newData = menuLeafNode.filter(function (item) {
          if (item.title.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
            return true;
          }

          var quickIndex = item && item.quickIndex && item.quickIndex.toLowerCase();

          if (quickIndex) {
            return quickIndex.startsWith(value.toLowerCase());
          }

          return false;
        });
      }

      this.setState({
        data: newData
      });
    }
    /**
     * 下拉框选择值时变化
     * @param {string} value - 选中菜单的路径
     */

  }, {
    key: "handleSelect",
    value: function handleSelect(value) {
      var menuLeafNode = this.props.menuLeafNode; // 必定选中 且只能选中一个

      var selectMenu = menuLeafNode.filter(function (item) {
        return item.id === value;
      })[0];

      if (!_isEmpty(selectMenu)) {
        var newTab = {
          icon: selectMenu.icon,
          name: selectMenu.name,
          path: selectMenu.path,
          type: selectMenu.type,
          search: selectMenu.search,
          id: selectMenu.id
        };
        openMenu(newTab);
        this.addHistory(newTab);
        this.setState({
          data: [],
          value: undefined
        });
      }
    }
    /**
     * 获取焦点
     */

  }, {
    key: "handleFocus",
    value: function handleFocus() {
      this.setState({
        focus: true
      });
    }
    /**
     * 失去焦点
     */

  }, {
    key: "handleBlur",
    value: function handleBlur() {
      this.setState({
        focus: false,
        data: [],
        value: undefined
      });
    }
    /**
     * 渲染搜索历史
     * @returns {Array|boolean|*}
     */

  }, {
    key: "renderHistory",
    value: function renderHistory() {
      var _this2 = this;

      var _this$state$history4 = this.state.history,
          history = _this$state$history4 === void 0 ? [] : _this$state$history4;
      return history && history.length > 0 && /*#__PURE__*/React.createElement("div", {
        className: styles.history
      }, /*#__PURE__*/React.createElement("span", {
        className: styles['history-title']
      }, intl.get('cpaas.common.component.search').d('搜索历史'), ":", /*#__PURE__*/React.createElement(Button, {
        ghost: true,
        onClick: this.handleHistoryClear,
        className: styles['btn-clear']
      }, intl.get('cpaas.common.button.clean').d('清除'))), /*#__PURE__*/React.createElement("ul", {
        className: styles['history-content']
      }, history && history.filter(function (tab) {
        return tab.name ? intl.get(tab.name) : '';
      }).map(function (tab) {
        return /*#__PURE__*/React.createElement(HistoryItem, {
          key: tab.key,
          item: tab,
          onClick: _this2.handleGotoHistory,
          onCloseClick: _this2.handleHistoryClose
        });
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          _this$props$className = _this$props.className,
          className = _this$props$className === void 0 ? '' : _this$props$className,
          collapsed = _this$props.collapsed;
      var _this$state = this.state,
          _this$state$data = _this$state.data,
          data = _this$state$data === void 0 ? [] : _this$state$data,
          value = _this$state.value,
          focus = _this$state.focus;
      var options = data && data.map(function (d) {
        return /*#__PURE__*/React.createElement(Select.Option, {
          key: d.id,
          value: d.id
        }, d.title);
      });
      var wrapClassNames = [className, styles.search];
      var iconClassNames = [styles.icon];

      if (collapsed) {
        wrapClassNames.push(styles.collapsed);
      }

      if (focus) {
        wrapClassNames.push(styles.focus);
        iconClassNames.push(styles.active);
      }

      return /*#__PURE__*/React.createElement("div", {
        className: wrapClassNames.join(' ')
      }, /*#__PURE__*/React.createElement("span", {
        className: iconClassNames.join(' ')
      }), /*#__PURE__*/React.createElement(Select, {
        showSearch: true,
        size: "small",
        placeholder: intl.get('cpaas.common.basicLayout.menuSelect').d('菜单搜索'),
        value: value,
        showArrow: false,
        className: styles.input,
        filterOption: false,
        onBlur: this.handleBlur,
        onFocus: this.handleFocus,
        onSearch: this.handleSearch,
        onSelect: this.handleSelect
      }, options), this.renderHistory());
    }
  }]);

  return DefaultHeaderSearch;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "handleGotoHistory", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "handleGotoHistory"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleHistoryClose", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "handleHistoryClose"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleHistoryClear", [_dec3], Object.getOwnPropertyDescriptor(_class.prototype, "handleHistoryClear"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleSearch", [_dec4], Object.getOwnPropertyDescriptor(_class.prototype, "handleSearch"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleSelect", [_dec5], Object.getOwnPropertyDescriptor(_class.prototype, "handleSelect"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleFocus", [_dec6], Object.getOwnPropertyDescriptor(_class.prototype, "handleFocus"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleBlur", [_dec7], Object.getOwnPropertyDescriptor(_class.prototype, "handleBlur"), _class.prototype)), _class));
export default connect(function (_ref) {
  var _ref$global = _ref.global,
      global = _ref$global === void 0 ? {} : _ref$global;
  return {
    menuLeafNode: global.menuLeafNode
  };
})(DefaultHeaderSearch);